<template>
  <el-dialog
    title="指定销售渠道"
    width="20%"
    top="10vh"
    center
    :visible.sync="visible"
    @close="visible = !visible"
  >
    <el-form ref="elForm" :model="formData">
      <el-form-item prop="storeId">
        <el-select style="width: 100%" v-model="formData.storeId" placeholder="请选择销售渠道">
          <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="item.storeName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <p class="mt-20 mb-10">确定后将锁定销售渠道，谨慎操作</p>
      <el-form-item label-width="0" class="mt-20 text-center">
        <el-button style="width: 100%" type="primary" @click="submitForm"> 确定 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'StorePopup',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        storeId: ''
      },
      storeList: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  created() {
    this.getChannelSelect()
  },
  methods: {
    async getChannelSelect() {
      const { data } = await this.$http.coupon.channelApi.getChannelSelect()
      this.storeList = [{ id: '', storeName: '暂不指定' }, ...data]
    },
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        this.$emit('submit', this.formData.storeId)
      })
    },
    resetForm() {
      this.visible = false
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>
